<template>
  <van-row class="card-receivers">
    <van-field required label-width="70px" label="接收人员" input-align="right" right-icon="add-o" clearable readonly placeholder="点击选择接收人员" @click-input="startSelectContact" @click-right-icon="startSelectContact" />
    <van-row v-if="value.length > 0">
      <van-tag
        v-for="(reciever, index) in value"
        :key="reciever.user_id"
        :index="index"
        closeable
        type="primary"
        @click="tagClose(index)">
        {{reciever.user_name}}
      </van-tag>
    </van-row>
    <van-popup
      v-model="showPageContact"
      position="right"
      get-container="body"
      style="width: 100%; height: 100%; background-color: #F9F9F9">
      <page-contact v-if="showPageContact" :receivers="value" :parentPath="parentPath" :showChildren="showChildren" v-on:onCancel="showPageContact = false" v-on:onConfirm="endSelectContact"/>
    </van-popup>
  </van-row>
</template>

<script>
import PageContact from '@/views/common/page/PageContact'
export default {
  name: 'CardReceives',
  components: { PageContact },
  props: ['value', 'parentPath', 'showChildren'],
  data () {
    return {
      showPageContact: false
    }
  },
  methods: {
    tagClose (index) {
      this.value.splice(index, 1)
      this.$emit('input', this.value)
    },
    startSelectContact () {
      if (this.parentPath.trim() === '') {
        this.$dialog.alert({
          message: '请选择申请部门'
        })
        return
      }
      this.showPageContact = true
    },
    endSelectContact (contacts) {
      this.value = contacts
      this.$emit('input', this.value)
      this.showPageContact = false
    }
  }
}
</script>

<style scoped lang="less">
  .card-receivers{
    .van-row {
      padding: 10px 16px;
      font-size: 12px;
      .van-tag{
        margin: 2px 2px;
        .van-icon{
          font-size: 12px;
        }
      }
    }
  }
  .van-cell {
    font-size: 12px;
    padding: 10px 16px;
    /deep/ .van-icon{
      font-size: 24px;
    }
  }
/deep/::-webkit-input-placeholder {
  color: #999;
  font-weight: bold;
}
</style>
